<template>
    <div class="login_container w-100 relative">
        <div class="login_form w-20 h-300 absolute">
            <p class="title size-26 letter weight text-center">登录系统</p>
            <a-form class="mt-25" :model="LoginFormState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item class="userName" name="userName">
                    <a-input class="p-5 w-100 userInput" v-model:value="LoginFormState.userName" />
                    <GitlabFilled style="color:#889AA4;font-size:20px;" class="absolute icons" />
                </a-form-item>
                <a-form-item name="password">
                    <a-input-password class="userInput" v-model:value="LoginFormState.password" />
                    <EditFilled style="color:#889AA4;font-size:20px;" class="absolute icons" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 14, offset: 50 }">
                    <a-button type="primary" class="w-100 h-50" @click="login">登录</a-button>
                </a-form-item>
            </a-form>
            <span class="text">账号：admin</span>
            <br>
            <span class="text">密码：admin</span>
        </div>
    </div>
</template>

<script>
import { defineComponent, reactive, getCurrentInstance, onMounted } from 'vue'
import { GitlabFilled, EditFilled } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

export default defineComponent({
    components: {
        GitlabFilled,
        EditFilled
    },
    setup() {
        const { proxy } = getCurrentInstance()
        const LoginFormState = reactive({
            userName: 'admin',
            password: 'admin'
        })
        const rules = {
            userName: [
                { required: true, message: '请输入账号', trigger: 'blur' },
                { min: 5, max: 10, message: '请检查账号', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 5, max: 10, message: '请检查密码', trigger: 'blur' }
            ]
        }
        async function login() {
            proxy.axios.post('/mock/api/user', {
                userName: LoginFormState.userName,
                password: LoginFormState.password
            })
            .then(res => {
                if (res.data.mate.status == 201) {
                    message.error('用户不存在')
                    return
                }
                message.success('登录成功')
                let userInfo = {}
                userInfo = res.data.result
                window.sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
                proxy.$router.push('/home')
            })
        }

        return {
            LoginFormState,
            labelCol: {
                span: 7
            },
            wrapperCol: {
                span: 10
            },
            rules,
            login
        }
    },
})
</script>

<style lang="scss" scoped>
.login_container {
    height: 100vh;
    background-color: #2D3A4B;
}
.login_form {
    top: 25%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.title {
    color: #fff;
}
.login_container ::v-deep(.ant-form-item-label label) {
    color: #fff;
    line-height: 50px;
}
.login_container ::v-deep(.ant-input-affix-wrapper) {
    background-color: #283443;
    border: 1px solid #394a5f;
}
.login_container .userName ::v-deep(.ant-input) {
    border: 1px solid #394a5f;
    height: 55px !important;
}
.login_container ::v-deep(.ant-form-item-control) {
    max-width: 100% !important;
}
.login_container ::v-deep(.ant-input) {
    background-color: #283443;
    color: #fff;
    height: 45px;
    font-size: 14px;
    letter-spacing: 2px;
    text-indent: 30px;
}
.icons {
    left: 12px;
    top: 18px;
}
.text {
    color: rgb(94, 92, 92);
    letter-spacing: 2px;
}
</style>
